"use client"
import { RedoOutlined, SearchOutlined, FilterOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import { Space, Table, Tabs, Input, Select, DatePicker, Button } from 'antd';
import type { TableProps, TabsProps } from 'antd';
import { getdata, deldata } from '@/app/request/http';

const rowSelection: TableProps['rowSelection'] = {
  onChange: (selectedRowKeys: React.Key[], selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};
const { Option } = Select;
const Pages = () => {
  let [getdatas, setGetdata] = useState([])

  const columns: TableProps['columns'] = [
    {
      title: '客户名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '客户状态',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '客户星级',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '首联系人',
      dataIndex: 'topOne',
      key: 'address',
    },
    {
      title: '手机号码',
      dataIndex: 'call',
      key: 'address',
    },
    {
      title: '最后跟进',
      dataIndex: 'time',
      key: 'address',
    },
    {
      title: '末跟进天数',
      dataIndex: 'day',
      key: 'address',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>跟进</a>
          <a>编辑</a>
          <a>顶置</a>
          <a onClick={() => {
            let id = getdatas.filter(item => item.id == record.id)
              setGetdata(deldata(id).then())
          }}>删除</a>
        </Space>
      ),
    },
  ];
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
  useEffect(() => {
    getdata().then(res => {
      return setGetdata(res);
    })
  }, [])


  let data: any = [
    // {
    //   key: 1,
    //   name: '深圳市亿恩科技有限公司',
    //   age: "正在跟进",
    //   address: <span><StarFilled /><StarFilled /><StarFilled /><StarFilled />
    //   <span><StarOutlined /></span></span>,
    //   topOne:"李小红",
    //   call:18888888888,
    //   time:"2018-08-25 14:54",
    //   day:"30"
    // },
  ];
  const onChange = (key: string) => {
    console.log(key);
  };

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '全部客户',
      children: <></>
    },
    {
      key: '2',
      label: '我的客户',
      children: '我的客户',
    },
    {
      key: '3',
      label: '下属客户',
      children: '下属客户',
    },
    {
      key: '4',
      label: '重点客户',
      children: '重点客户',
    },
    {
      key: '5',
      label: '我的协议',
      children: '我的协议',
    },
    {
      key: '6',
      label: '下属协议',
      children: '下属协议',
    },
  ];
  const [position, setPosition] = useState<'start' | 'end'>('end');
  return (<>

    <Tabs defaultActiveKey="1" items={items} onChange={onChange} />

    {items.map(item => {
      {
        item.key == "1" ? item.children = <>
          <Input style={{ width: "200px" }} placeholder='搜索关键词' />
          <Select
            placeholder="客户状态"
            allowClear
            style={{ width: "200px", marginLeft: "10px" }}
          >
            <Option value="male">正在实习</Option>
            <Option value="female">正在跟班</Option>
            <Option value="other">已经完成</Option>
          </Select>
          <Select
            placeholder="客户类型"
            allowClear
            style={{ width: "200px", marginLeft: "10px" }}
          >
            <Option value="male">土豪</Option>
            <Option value="female">平民</Option>
            <Option value="other">乞丐</Option>
          </Select>
          <Select
            placeholder="客户星级"
            allowClear
            style={{ width: "200px", marginLeft: "10px" }}
          >
            <Option value="male">2星</Option>
            <Option value="female">3星</Option>
            <Option value="other">4星</Option>
          </Select>

          <DatePicker placeholder='最后跟进' style={{ width: "200px", marginLeft: "10px" }} />

          <Button style={{ margin: "10px" }} type="primary" icon={<SearchOutlined />} iconPosition={position}>
            查询
          </Button>
          <Button icon={<RedoOutlined />} iconPosition={position}>
            重置
          </Button>

          <a style={{ marginLeft: "20px" }}>高级筛选 <FilterOutlined /></a>
          <div style={{ margin: "20px" }}>
            <Button type="primary">添加</Button>
          </div>
          <Table rowSelection={{ type: selectionType, ...rowSelection }} columns={columns} dataSource={getdatas} rowKey="id" />
        </> : "123"
      }
    })
    }
  </>
  )
}

export default Pages;